<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#/bots">Bots</a></li>
  <li class="breadcrumb-item active">Import Bot</li>
</ol>

<div class="container-fluid">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <form name="importbotform" novalidate ng-submit="importBot()">
                    <div class="card">
                        <div class="card-header">
                            <strong>Import New Bot (Rasa NLU only)</strong>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input autocomplete="off" type="text" ng-model="formData.bot_name" class="form-control" id="name" placeholder="Enter the bot name" required>
                                    </div>
                                    <div class="form-group">
                                      <label for="botFile">File <small>(rasa_nlu: json format)</small></label>
                                      <input type="file"  ngf-select="validateAndPreviewBot($file)" class="form-control"  ng-model="formData.file" name="file" ngf-max-size="2MB" ngf-pattern="'.txt,.json'" ngf-accept="'text/plain,application/json'" id="botFile" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-sm btn-primary" ng-disabled="fileInvalid"><i class="fa fa-dot-circle-o"></i> Save</button>
                    </div>
                  </div>
                </form>
                <div class="card" ng-show="show_preview">
                    <div class="card-header">
                        <strong>Bot Preview</strong>
                    </div>
                    <div class="card-block">
                      <div class="progress" style="width:50%;margin: 0 auto" ng-show="show_progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
                      </div>
                      <div ng-show="!show_progress">
                          <label><strong>File Name:</strong>{{formData.file.name}}</label><br>
                          <label><strong>File Size:</strong>{{filesize}}</label>
                          <json-formatter json="botImportData" open="4"></json-formatter>
                      </div>

                    </div>
              </div>
            </div>
          </div>
        </div>
      </div>
